<template>
  <el-dialog
    v-model="dialogVisible"
    :title="winTitle"
    :close-on-click-modal="false"
    append-to-body
    width="800"
    class="editDialog"
    align-center
  >
    <el-form
      inline
      class="basicForm"
      label-position="right"
      v-model="formObj"
      label-width="100px"
    >
      <el-form-item label="设备名" required>
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="sn码">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="mac地址">
        <el-input v-model="formData.mac"></el-input>
      </el-form-item>
      <el-form-item label="出厂时间">
        <el-date-picker
          v-model="formData.manufactureDate"
          type="datetime"
          placeholder="请选择出厂时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <br />
      <el-form-item label="产品类型">
        <el-select v-model="formData.modelCode" placeholder="请选择类型">
          <el-option
            v-for="item in formData.modelList"
            :key="item.modelCode"
            :label="
              item.modelName + (item.remark ? '(' + item.remark + ')' : '')
            "
            :value="item.modelCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备图片">
        <div class="uploadWrap">
          <el-input v-model="formData.img"></el-input>
          <input
            type="file"
            accept="image/*"
            @change="onImgChange"
            v-if="dialogVisible"
          />
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="dialogVisible = false" auto-insert-space
        >取消</el-button
      >
      <el-button type="primary" @click="onConfirm" auto-insert-space
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps } from "vue";

import { ElMessage } from "element-plus";

import { hardwareEdit } from "../../utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

let winTitle = ref("");

let formData = ref({
  name: "",
  type: "",
  code: "",
  mac: "",
  manufactureDate: "",
  img: "",
  file: null,
  modelCode: "",
  id: "",
  modelList: [],
});

let isEdit = ref(false);

const openDialog = (modelList, rowData) => {
  dialogVisible.value = true;
  formData.value.modelList = modelList;

  if (!rowData) {
    winTitle.value = "新增";
    formData.value.name = "";
    formData.value.code = "";
    formData.value.mac = "";
    formData.value.manufactureDate = "";
    formData.value.modelCode = "";
    formData.value.img = "";
    formData.value.id = "";
    isEdit.value = false;
  } else {
    winTitle.value = "修改";
    formData.value.name = rowData.name;
    formData.value.code = rowData.code;
    formData.value.mac = "" + rowData.mac;
    formData.value.manufactureDate = rowData.manufactureDate;
    formData.value.modelCode = rowData.modelCode;
    formData.value.id = rowData.id;
     formData.value.img = rowData.img || "";
    isEdit.value = true;
  }
};

const onImgChange = (e) => {
  formData.value.file = e.target.files[0];
  formData.value.img = formData.value.file.name;
};

const onConfirm = () => {
  const transformData = new FormData();
  if (formData.value.file) {
    transformData.append("file", formData.value.file);
  }

  if (formData.value.manufactureDate) {
    transformData.append("manufactureDate", formData.value.manufactureDate);
  }

  transformData.append("name", formData.value.name);
  transformData.append("code", formData.value.code);
  transformData.append("mac", formData.value.mac);

  transformData.append("modelCode", formData.value.modelCode);
  transformData.append("id", formData.value.id);

  hardwareEdit(transformData).then((data) => {
    if (data) {
      ElMessage.success("保存成功");
      emits("confirm");
      dialogVisible.value = false;
    } else {
      ElMessage.error("保存失败");
    }
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
  > * {
    width: calc(50% - 20px);
    margin-right: 20px;

    .selectInput {
      flex: 1;
    }

    :deep(.el-date-editor) {
      width: 100%;
    }
  }

  > .long {
    width: calc(100% - 20px);
    margin-right: 20px;
  }

  .sumUnit {
    .text {
      margin-right: 10px;
    }
  }
}

.uploadWrap {
  position: relative;
  width: 270px;

  input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>
